<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>艾家艾产品线上销售平台</title>
	<link rel="shortcut icon" href="../img/favicon.ico">
	<link rel="stylesheet" href="../css/reset.css" />
	<link rel="stylesheet" href="../css/shopCart.css" />
	<script src="../them/jquery/jquery-1.7.2.js"></script>
	
	<style>
	</style>
</head>
<body>
	<header>
		<div class="header clearfix">
			<a class="fl" href="index.html">
				<h1>
					<div class="h1_box clearfix">
						<img class="height_min fl" src="http://192.168.31.3:18089/mall_config/logo.jpg" alt="">
						<img class="fl" src="http://192.168.31.3:18089/mall_config/logo.jpg" alt="">
					</div>
				</h1>	
			</a>
			<div class="title fl">
				<h2 class="fl">
					我的购物车
				</h2>
				<p class="hint fl">
					温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
				</p>
				<ul class="title_item fr">
					<li class="userName fl">
						<i style="font-style: normal;" class="user_name"></i><span></span>
						<ul class="user_menu">
							<li><a href="personal-center.html">个人中心</a></li>
							<li><a href="user-favorite.html">我的喜欢</a></li>
							<li><a href="change-information.html" class="changeInfo">修改信息</a></li>
							<li><a href="indent.html" class="quit">退出登录</a></li>
						</ul>
					</li>
					<li class="indent fl">
						<a href="indent.html">我的订单</a>

					</li>
				</ul> 
			</div>
		</div>
	</header>
	<div id="conetent_wrapper">
		<div id="content">
			<div class="control_box clearfix">
				<div class="radio_box fl">
					<input type="checkbox" id="quanxuan" name="sport" value="">
					<span>全选</span>
				</div>
				<div class="sp_name fl">
					商品名称
				</div>
				<div class="sp_price fl">
					单价
				</div>
				<ul class="sp_det fr">
					<li class="sp_det_item fl">数量</li>
					<li class="sp_det_item fl">小计</li>
					<li class="sp_det_item fl">操作</li>
				</ul>
			</div>
			<div class="details">

			</div>
			<div class="kxsp_box">
				<ul>
					<!--<li id="tj302" class="kxsp_box_item">-->
						<!--<span class="add_sp"></span><span class="add_name">+249元得小米vr眼镜</span>-->
					<!--</li>-->
				</ul>
			</div>
			<div class="cart_bar">
				<div class="fl section_left">
					<a href="index.html"><p class="jxgw">继续购物</p></a>
					<p class="tongji">
						共<span class="commodity_amount">1</span>件商品,已选择<span class="selected_amount">0</span>件
					</p>
				</div>
				<div class="btn_disabled fr">
					去结算
					<div class="btn_disabled_ts">
						请勾选需要结算的商品
						<span></span>
					</div>
				</div>
				<div class="fr total_prices">
					<p class="fl total_prices_text">合计（不含运费）</p>
					<p class="fl total_prices_count">0</p>元
				</div>
			</div>
			
		</div>
		
	</div>
	<div class="footer">
		<div class="fuwu">
			<ul>
				<li>预约维修服务</li>
				<li>7天无理由退货</li>
				<li>15天免费换货</li>
				<li>满150元包邮</li>
				<li>520余家售后网点</li>
			</ul>
		</div>
		<div class="fuwu_det clearfix">
			<ul class="fl fuwu_det_item">
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
					
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
			</ul>
			<ul class="fl fuwu_det_tel">
				<li class="fuwu_det_num">400-100-5678</li>
				<li class="fuwu_det_time">周一至周日 8:00-18:00</li>
				<li class="fuwu_det_time">（仅收市话费）</li>
				<li class="fuwu_det_btn">24小时在线客服</li>
			</ul>
		</div>
		<div class="bottom clearfix">
			<div class="logo_b fl"></div>
			<div class="bottom_text fl">
				<ul>
					<li>艾家商城</li>
					<li>AiJia</li>
					<li>艾聊</li>
					<li>多看书城</li>
					<li>艾生活艾草</li>
					<li>艾疗</li>
					<li>艾家天猫店</li>
					<li>艾家淘宝直营店</li>
					<li>aijia.com</li>
				</ul>
				<p>aijia.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
				<p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
			</div>
			<div class="bottom_img fl">
				<img src="../../img/truste.png" alt="">
				<img src="../../img/v-logo-1.png" alt="">
				<img src="../../img/v-logo-2.png" alt="">
				<img src="../../img/v-logo-3.png" alt="">
			</div>
		</div>
	</div>


		<div class="delete_box">
			<div class="delete_box_children">
				<span class="delete_box_close"></span>
				<p class="delete_box_text">确定删除吗？</p>
				<div class="delete_box_btnbox">
					<div class="fl delete_box_btn delete_box_abolish">取消</div>
					<div class="delete_box_btn delete_box_confirm fr">确定</div>
				</div>
			</div>
		</div>
		
	<script>
        $.ajax({
            url:'/user/get_user_info.do',
            type:'post',
            success:function(result){
                var name=result.data.username;
                if(!result.status){
                    $('.user_name').html(name);
                    $('.quit').click(function(){
                        $.ajax({
                            url:'/user/logout.do',
                            type:'post',
                            success:function(result){
                                if(!result.status){
                                    $('.hint').html('');
                                    window.location.href='index.html';
                                }
                            }
                        });
                    });
                    $('.changeInfo').click(function(){
                        window.location.href='change-information.html';
                    });
                }
            }
        });
        //获取商品总数
        function hq_sp_count() {
            $.ajax({
                url:'/cart/get_cart_product_count.do',
                type:'post',
                success:function(res){
                    $('.commodity_amount').html(res.data);
                },
                error:function(){

                }
            });
        }
        hq_sp_count();
		//选中商品的个数
        var act_count=0;
        //选中商品的总价
        var act_rmb=0;
        //每件商品选中的个数
        var item_count=0;
        //每件商品选中的价格
        var item_rmb=0;
        //商品id
		var productId;
		//判断购物车有没有商品
		function sp_null(res){
            var goods_list=res.data.cartProductVoList;
            if(!goods_list.length){
                $('#conetent_wrapper').html('<div class="cartblank"><div class="cartblank_text"><p>您的购物车还是空的！</p><a href="index.html" class="cartblank_btn">马上去购物</a></div></div>');
				return;
            }
		}
		//判断是否有选中的商品 控制提示框显示隐藏
		function show_hiden(){
		    if(act_count){
		        $('.btn_disabled_ts').css('display','none');
		        $('.btn_disabled').addClass('btn_disabled_ac');
                //去结算
                $('.btn_disabled_ac').click(function(){
                    window.location.href = "affirm-indent.html";
                });
			}else{
                $('.btn_disabled_ts').css('display','block');
                $('.btn_disabled').removeClass('btn_disabled_ac');
			}
		}

		//更改视图函数
		function sj_taggo(){
            //已选商品 的个数
            $('.selected_amount').html(act_count);
            //已选商品的总价
            $('.total_prices_count').html(act_rmb.toFixed(2));
		}

		//减少数量的函数
        function count_reduce(i){
            item_rmb=Number($('.commodity_price').eq(i).html());
            item_count=Number($('.count').eq(i).html());
            item_count--;
            if(item_count<1){
                item_count=1;
                return ;
            }
            $('.count').eq(i).html(item_count);
            $('.commodity_price_sum').eq(i).html((item_count*item_rmb).toFixed(2));
            act_rmb-=item_rmb;
            act_count--;
            show_hiden();
            sj_taggo();

            $('.total_prices_count').html(act_rmb.toFixed(2));
            //调用修改数量接口
            $.ajax({
                url:'/cart/update.do',
                data:{
                    'count':item_count,
                    'productId':Number($('.details_item').eq(i).attr('id'))
                },
                type:'post',
                success:function(res){
                    $('.total_prices_count').html(res.data.cartTotalPrice.toFixed(2));
                    //调获取购物车商品个数接口
                    hq_sp_count();
                },
                error:function(){

                }
            });
        }
        //增加数量的函数
        function count_add(i){
            item_rmb=Number($('.commodity_price').eq(i).html());
            item_count=Number($('.count').eq(i).html());
            item_count++;

            $('.count').eq(i).html(item_count);
            $('.commodity_price_sum').eq(i).html((item_count*item_rmb).toFixed(2));
            act_rmb+=item_rmb;
            act_count++;
            show_hiden();
            sj_taggo();
            //调用修改数量接口
            $.ajax({
                url:'/cart/update.do',
                data:{
                    'count':item_count,
                    'productId':Number($('.details_item').eq(i).attr('id'))
                },
                type:'post',
                success:function(res){
                    $('.total_prices_count').html(res.data.cartTotalPrice.toFixed(2));
                    //调获取购物车商品个数接口
                    hq_sp_count();
                },
                error:function(){

                }
            });
        }

        //选中与取消选中函数
        function check_un(i){
            productId=$('.details_item ').eq(i).attr('id');
            if($('input:checkbox[name="check_commodity"]').eq(i).attr("checked")){
                //绑定改变数量函数
                $('.count_j').eq(i).off("click").on("click",function () {
                    count_reduce(i);
                });
                $('.count_z').eq(i).off("click").on("click",function(){
                    count_add(i);
                });

                act_count+=Number($('.count').eq(i).html());
                show_hiden();
                act_rmb+=Number($('.commodity_price_sum').eq(i).html());
                //设置选中个数  总价
                sj_taggo();

                //调选中接口
                $.ajax({
                    url:'/cart/select.do',
                    data:{
                        'productId':productId
                    },
                    type:'post',
                    success:function(res){
                        $('.total_prices_count').html(res.data.cartTotalPrice.toFixed(2));
                    },
                    error:function(){
                        alert('添加失败，请重新添加');
                    }
                });
            }else{
                //解除改变数量函数
                $('.count_j').eq(i).off("click");
                $('.count_z').eq(i).off("click");
                act_count-=Number($('.count').eq(i).html());
                show_hiden();
                act_rmb-=Number($('.commodity_price_sum').eq(i).html());
                //设置选中个数与总价
                sj_taggo();
                //调反选接口
                $.ajax({
                    url:'/cart/un_select.do',
                    data:{
                        'productId':productId
                    },
                    type:'post',
                    success:function(res){
                        $('.total_prices_count').html(res.data.cartTotalPrice.toFixed(2));
                    },
                    error:function(){

                    }
                });
            }

            //点击选中时看看 是不是全选了
            if(act_count==$('.commodity_amount').html()){
                $('#quanxuan').attr("checked",true);
            }else{
                $('#quanxuan').attr("checked",false);
            }
        }

        $.ajax({
            url:'/cart/list.do',
            type:'post',
            success:function(res){
                var goods_list=res.data.cartProductVoList;
                var imageHost=res.data.imageHost;
                act_rmb=res.data.cartTotalPrice;
                sp_null(res);

                $.each(goods_list,function(index,val){
                    //index 索引
                    //val每一项的值
					//console.log(val.quantity*val.productPrice);
                    $('.details').append('<ul id="'+val.productId+'" class="details_item clearfix"><li class="check_sp fl"><input class="checkbox" type="checkbox" name="check_commodity" value=""><div class="img_box"><img src="'+(imageHost+val.productMainImage)+'" height="60" width="60" alt=""></div></li><li class="name_sp fl">'+val.productName+'</li><li class="price_sp fl"><span class="commodity_price">'+val.productPrice+'</span>元</li><li class="det_sp fl"><ul><li class="det_sp_item fl"><div class="count_box clearfix"><span class="count_box_item fl count_j">-</span><span class="count_box_item fl count">'+val.quantity+'</span><span class="count_box_item fl count_z">+</span></div></li><li class="det_sp_item fl"><span class="commodity_price_sum"> '+(val.productTotalPrice.toFixed(2))+'</span>元</li><li class="det_sp_item fl"><span class="delete_sp"></span></li></ul></li></ul>');
                    //根据是否选中添加状态和绑定改变数量的函数
                    if(val.productChecked){
						$('input:checkbox[name="check_commodity"]').eq(index).attr("checked",true);
                        act_count+=val.quantity;
                        show_hiden();

					}

                });
                //加载页面时检查是不是全选了
                if(act_count==$('.commodity_amount').html()){
                    $('#quanxuan').attr("checked",true);
                }
                sj_taggo();
				//全选按钮的点击
				$('#quanxuan').off("click").on("click",function(){
					if($(this).attr("checked")){
					    //全选重置为0
                        act_count=0;
                        act_rmb=0;
						$('input:checkbox[name="check_commodity"]').each(function(index,element){
                            //index 索引
                            //element每一个元素
							$(this).attr("checked",true);
                            act_count+=Number($('.count').eq(index).html());
                            act_rmb+=Number($('.count').eq(index).html())*Number($('.commodity_price').eq(index).html());
                        });
                        //根据选中情况 绑定 更改数量的函数
                        $('input:checkbox[name="check_commodity"]').each(function(i,el){
                            if($(this).attr("checked")){
                                //绑定改变数量函数
                                $('.count_j').eq(i).off("click").on("click",function () {
                                    count_reduce(i);
                                });
                                $('.count_z').eq(i).off("click").on("click",function(){
                                    count_add(i);
                                });
                            }else{
                                $('.count_j').eq(i).off("click");
                                $('.count_z').eq(i).off("click");
                            }
                        });
                        sj_taggo();
                        show_hiden();
                        //调全部选中接口
                        $.ajax({
                            url:'/cart/select_all.do',
                            type:'post',
                            success:function(res){
                                $('.total_prices_count').html(res.data.cartTotalPrice.toFixed(2));
                            },
                            error:function(){

                            }
                        });
					}else{
					    //全不选就是 选中为0  总价为0 然后全部取消选中
                        act_count=0;
                        show_hiden();
                        act_rmb=0;
                        $('input:checkbox[name="check_commodity"]').each(function(index,element){
                            //index 索引
                            //element每一个元素
                            $(this).attr("checked",false);
                        });
                        //根据选中情况 绑定 更改数量的函数
                        $('input:checkbox[name="check_commodity"]').each(function(i,el){
                            if($(this).attr("checked")){
                                //绑定改变数量函数
                                $('.count_j').eq(i).off("click").on("click",function () {
                                    count_reduce(i);
                                });
                                $('.count_z').eq(i).off("click").on("click",function(){
                                    count_add(i);
                                });
                            }else{
                                $('.count_j').eq(i).off("click");
                                $('.count_z').eq(i).off("click");
                            }
                        });
                        sj_taggo();
                        //调全部反选接口
                        $.ajax({
                            url:'/cart/un_select_all.do',
                            type:'post',
                            success:function(res){
                                $('.total_prices_count').html(res.data.cartTotalPrice.toFixed(2));
                            },
                            error:function(){

                            }
                        });
					}

				});
				//根据选中情况 绑定 更改数量的函数
                $('input:checkbox[name="check_commodity"]').each(function(i,el){
                    if($(this).attr("checked")){
                        //绑定改变数量函数
                        $('.count_j').eq(i).off("click").on("click",function () {
                            count_reduce(i);
                        });
                        $('.count_z').eq(i).off("click").on("click",function(){
                            count_add(i);
						});
                    }else{
                        $('.count_j').eq(i).off("click");
                        $('.count_z').eq(i).off("click");
                    }
                });
				//多选框点击事件
                $('input:checkbox[name="check_commodity"]').each(function(i,el){
				    $(this).off("click").on("click",function(){
                        check_un(i);
					});
				});
                //删除商品
                $('.delete_sp').each(function(i,el){
                    $(this).off("click").on("click",function(){
                        productId=$('.details_item ').eq(i).attr('id');
                        $('.delete_box').css('display','block');
                        $('.delete_box_close').off("click").on("click",function(){
                            $('.delete_box').css('display','none');
                        });
                        $('.delete_box_abolish').off("click").on("click",function(){
                            $('.delete_box').css('display','none');
                        });
                        $('.delete_box_confirm').off("click").on("click",function(){
                            $('.delete_box').css('display','none');
                            //更改数据
							if(($('#'+productId+' .checkbox').attr('checked'))){
                                act_count-=Number($('#'+productId+' .count').html());
                                show_hiden();
                                act_rmb-=Number($('#'+productId+' .commodity_price_sum').html());

                                //设置选中个数与总价
                                sj_taggo();
							}

                            $('#'+productId).remove();

                            //调用删除接口
                            $.ajax({
                                url:'/cart/delete_product.do',
                                data:{
                                    'productIds':productId
                                },
                                type:'post',
                                success:function(res){

                                    hq_sp_count();
                                    $('.total_prices_count').html(res.data.cartTotalPrice.toFixed(2));

                                    //根据选中情况 绑定 更改数量的函数
                                    $('input:checkbox[name="check_commodity"]').each(function(i,el){
                                        if($(this).attr("checked")){
                                            //绑定改变数量函数
                                            $('.count_j').eq(i).off("click").on("click",function () {
                                                count_reduce(i);
                                            });
                                            $('.count_z').eq(i).off("click").on("click",function(){
                                                count_add(i);
                                            });
                                        }else{
                                            $('.count_j').eq(i).off("click");
                                            $('.count_z').eq(i).off("click");
                                        }
                                    });
                                    //多选框点击事件
                                    $('input:checkbox[name="check_commodity"]').each(function(i,el){
                                        $(this).off("click").on("click",function(){
                                            check_un(i);
                                        });
                                    });
                                    //删除商品
                                    $('.delete_sp').each(function(i,el){
                                        $(this).off("click").on("click",function(){
                                            productId=$('.details_item ').eq(i).attr('id');
                                            $('.delete_box').css('display','block');
                                            $('.delete_box_close').off("click").on("click",function(){
                                                $('.delete_box').css('display','none');
                                            });
                                            $('.delete_box_abolish').off("click").on("click",function(){
                                                $('.delete_box').css('display','none');
                                            });
                                            $('.delete_box_confirm').off("click").on("click",function(){
                                                $('.delete_box').css('display','none');
                                                //更改数据
                                                if(($('#'+productId+' .checkbox').attr('checked'))){
                                                    act_count-=Number($('#'+productId+' .count').html());
                                                    show_hiden();
                                                    act_rmb-=Number($('#'+productId+' .commodity_price_sum').html());

                                                    //设置选中个数与总价
                                                    sj_taggo();
                                                }

                                                $('#'+productId).remove();

                                                //调用删除接口
                                                $.ajax({
                                                    url:'/cart/delete_product.do',
                                                    data:{
                                                        'productIds':productId
                                                    },
                                                    type:'post',
                                                    success:function(res){

                                                        hq_sp_count();
                                                        $('.total_prices_count').html(res.data.cartTotalPrice.toFixed(2));

                                                        //根据选中情况 绑定 更改数量的函数
                                                        $('input:checkbox[name="check_commodity"]').each(function(i,el){
                                                            if($(this).attr("checked")){
                                                                //绑定改变数量函数
                                                                $('.count_j').eq(i).off("click").on("click",function () {
                                                                    count_reduce(i);
                                                                });
                                                                $('.count_z').eq(i).off("click").on("click",function(){
                                                                    count_add(i);
                                                                });
                                                            }else{
                                                                $('.count_j').eq(i).off("click");
                                                                $('.count_z').eq(i).off("click");
                                                            }
                                                        });
                                                        //多选框点击事件
                                                        $('input:checkbox[name="check_commodity"]').each(function(i,el){
                                                            $(this).off("click").on("click",function(){
                                                                check_un(i);
                                                            });
                                                        });


                                                    },
                                                    error:function(){

                                                    }
                                                });

                                                //判断有没有商品
                                                if(!$('.details').children().length){
                                                    $('#conetent_wrapper').html('<div class="cartblank"><div class="cartblank_text"><p>您的购物车还是空的！</p><a href="index.html" class="cartblank_btn">马上去购物</a></div></div>');
                                                    return;
                                                }
                                            });
                                        });
                                    });

                                },
                                error:function(){

                                }
                            });

                            //判断有没有商品
                            if(!$('.details').children().length){
                                $('#conetent_wrapper').html('<div class="cartblank"><div class="cartblank_text"><p>您的购物车还是空的！</p><a href="index.html" class="cartblank_btn">马上去购物</a></div></div>');
                                return;
                            }
                        });
                    });
                });
            },
            error:function(){

            }
        });
	</script>
	
</body>
</html>